<template>
	<gui-page ref="guipage">
		<view slot="gBody">
			<view class="gui-img-crop">
				<view class="gui-cropper-wrapper" :style="{height:height + 'px', width:width+'px'}">
					<canvas canvas-id="bgCropper" id="bgCropper" class="gui-cropper-bg" :disable-scroll="true"
						@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
						:style="{width:width+'px', height:height+'px'}"></canvas>
					<canvas canvas-id="prevCropper" id="prevCropper" class="gui-cropper-prev"
						:disable-scroll="true"></canvas>
				</view>
				<view class="btnList gui-flex gui-rows gui-nowrap primary-bg-color">
					<!-- <view class="gui-cropper-btn" @tap="selectImg">+ 选择图片</view> -->
					<view class="gui-cropper-btn" @tap="saveImg">保存头像</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>
<script>
	import WeCropper from '@/GraceUI5/js/WeCropper.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// WeCropper 对象
				WeCropper: null,
				isCheck: false,
				// 核心宽度系统会重新计算
				width: 300,
				// 核心高度系统会重新计算
				height: 500,
				// 剪裁设置对象
				cropperSets: {
					height: 500,
					width: 300,
					id: 'bgCropper',
					targetId: 'prevCropper',
					scale: 2.5, // 最大缩放倍数
					zoom: 8, // 缩放系数
					cut: {
						x: 0, // 裁剪框x轴起点
						y: 0, // 裁剪框y轴期起点
						width: 200, // 裁剪框宽度
						height: 200 // 裁剪框高度
					}
				}
			}
		},
		onLoad: function(options) {
			console.log(options);
			// 获取屏幕信息规划剪裁组件宽度和高度
			const sysinfo = uni.getSystemInfoSync();
			this.width = sysinfo.windowWidth;
			this.height = sysinfo.windowHeight - 50;
			this.cropperSets.width = this.width;
			this.cropperSets.height = this.height;
			this.cropperSets.pixelRatio = sysinfo.pixelRatio;
			this.cropperSets.cut.x = (this.width - this.cropperSets.cut.width) / 2;
			this.cropperSets.cut.y = (this.height - this.cropperSets.cut.height) / 2;
			this.WeCropper = new WeCropper(this.cropperSets);
			this.$nextTick(function() {
				this.WeCropper.pushOrign(options.headImg);
			})
		},
		methods: {
			selectImg: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// this.isCheck=true;
						this.WeCropper.pushOrign(res.tempFilePaths[0]);
					}
				});
			},
			touchStart(e) {
				this.WeCropper.touchStart(e);
			},
			touchMove(e) {
				this.WeCropper.touchMove(e);
			},
			touchEnd(e) {
				this.WeCropper.touchEnd(e);
			},
			saveImg: function() {
				uni.showLoading({
					mask: true,
					title: ""
				});
				this.WeCropper.getCropperImage((tempFilePath) => {
					if (tempFilePath) {
						// 01. 此处 h5 端生成 base64 形式的图片数据, 其他端生成一个临时文件地址
						// 02. 可以连接 api 完成图片的上传工作
						// 03. 上传完成后关闭当页面，返回账户中心更新最新的头像地址即可
						// 此处演示了 图片预览
						// 上传接口
						// uni.previewImage({urls:[tempFilePath]});
						this.$http.upload('/api/common/upload', tempFilePath).then(res => {
							let result = res.data.data
							console.log('result',result)
							this.$http.post('/api/oauth/edit', {
									headPortrait: result
								})
								.then(res2 => {
										this.$u.msg('修改成功！')
										this.vuex_userInfo.headPortrait = result
										this.$u.vuex('vuex_userInfo', this.vuex_userInfo);
										this.$u.back(1, 1000)
								});

						})
					} else {
						console.log('获取图片地址失败，请稍后重试')
					}
					uni.hideLoading();
				});
			},
		}
	}
</script>
<style>
	.gui-img-crop {
		width: 750rpx;
		background: rgba(0, 0, 0, .2);
		height: 100%;
		position: fixed;
		z-index: 90;
		left: 0;
		top: 0;
	}

	/* background:url(''); */
	/* #ifdef H5 */
	.gui-img-crop {
		top: 44px;
	}

	/* #endif */
	.gui-cropper-wrapper {
		overflow: hidden;
	}

	.gui-cropper-bg {}

	.gui-cropper-prev {}

	.btnList {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.gui-cropper-btn {
		width: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 28rpx;
		color: #FFFFFF;
		background: linear-gradient( 180deg, #FF7272 0%, #FF0019 100%);
	}
</style>